<script>
import styled from 'vue-styled-components'
import req from '@/api/apiSetting'
const StyledContainer = styled.div`
  width: 100%;
  height: 100%;
  padding:20px;

  .link-item{
    display:flex;
    align-items:center;

    .copy-bth{
      margin-left: 10px;
    }
  }

  .el-input-number.is-controls-right {
    .el-input__inner{
      text-align:left;
      padding:0 15px;
      width:220px;
    }

    .el-input-number__decrease,.el-input-number__increase{
      display:none;
    }
  }

  .el-form-item__label{
    color: #333;
    line-height: 20px;
    font-weight:bold;
  }

  .el-form-item.is-required .el-form-item__label:before{
    color: #FF4A1C !important;
  }

  .el-button--primary{
    background-color: #0F9D7D;
    border-color: #0F9D7D;
    padding:10px 13px;

    &:focus, :hover {
      background: rgb(15 157 125 / 78%);
      border-color: rgb(15 157 125 / 78%);
      color: #FFF;
    }
  }

  .el-input__inner{
    color:#333;
  }
`
export default {
  data () {
    return {
      form: {
        mxFile: '',
        month: '',
        openingBalance: 0,
      },
      rules: {
        month: [
          { required: true, message: '请选择月份' },
        ],
        mxFile: [
          { required: true, message: '请选择明细表' },
        ],
        openingBalance: [
          // { required: true, message: '请输入期初余额' },
        ],
      },
    }
  },
  created () {
    let userData = window.localStorage.getItem('userData')
    try {
      userData = JSON.parse(userData || '')
    } catch (e) {
      userData = {}
    }
    this.userData = userData
    this.form.openingBalance = userData.openingBalance || 0
  },
  methods: {
    handleChooseFile () {
      this.$refs.input.value = null
      this.$refs.input.click()
    },
    handleFileChange (ev) {
      const files = ev.target.files
      if (!files) return
      let file = files[0]
      this.form.mxFile = file
    },
    handleExport () {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let formData = new FormData()
          formData.append('month', this.form.month)
          formData.append('mxFile', this.form.mxFile)
          formData.append('openingBalance', this.form.openingBalance)
          let ret = await req.upload('api/reportMonth2', formData)
          if (ret.data.code === 0) {
            window.open(`${process.env.BASE_URL}api/download/${ret.data.result}`)
            setTimeout(() => {
              window.Toast.success('导出月报成功')
            }, 10)
          } else {
            window.Toast.error('导出日报错误：' + ret.data.msg)
          }
        }
      })
    },
  },
  render () {
    let { form, rules } = this
    return (
      <StyledContainer>
        <el-form
          ref="form"
          props={{
            model: form,
            rules: rules,
            labelPosition: 'top',
          }}>
          <el-form-item label="明细表" prop="mxFile">
            <div class="link-item">
              <el-input
                readonly
                value={form.mxFile ? form.mxFile.name : ''}
                placeholder="明细表文件地址" />
              <el-button
                class="copy-bth"
                type="primary"
                on-click={() => { this.handleChooseFile('mx') }}>
                  选择文件
              </el-button>
            </div>
          </el-form-item>
          <el-form-item label="选择月份" prop="month">
            <el-date-picker
              v-model={form.month}
              type="month"
              value-format="yyyyMM"
              placeholder="选择月份">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="期初余额" prop="openingBalance">
            <el-input-number v-model={form.openingBalance} controls-position="right" on-change={(value) => {
              this.userData.openingBalance = value
              window.localStorage.setItem('userData', JSON.stringify(this.userData))
            }
            }/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" on-click={this.handleExport}>生成月报</el-button>
          </el-form-item>
        </el-form>
        <input
          class="hidden"
          name="file"
          type="file"
          ref="input"
          on-change={this.handleFileChange}
          multiple={false}
          accept=".xlsx,.xls"/>
      </StyledContainer>
    )
  },
}
</script>
